<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--标准mui.css-->

		<!--App自定义的css-->
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/ymk.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<link href="css/mui.picker.min.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<script type="text/javascript" src="js/my.js" ></script>
		<script type="text/javascript" src="js/jquery-form.js"></script>
		<style>
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav public-color">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">入住申请</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group  tjxdz" id="form1">
				<input type="text" placeholder="申请人姓名" name="name" id="name">
				<input type="text" placeholder="申请人手机号" name="username" id="username">
				<input type="hidden" name="user_id" id="user_id" />

				<input type="text" placeholder="床位信息" id='bed'>
				<input type="hidden" id="bed_id" name="bed_id" />
				<!--<div style="height:auto; float:left;padding-left: 20px; margin-right: 80px; display:inline" ><input type="radio" value="1" class="paytype">有优惠</input></div>
				
				<div style="height:auto; float:left;display:inline; margin-left: 50px;"><input type="radio" value="0" class="paytype">按期交</input></div>-->

				<input type="radio" value="0" checked="checked" name="paytype" id="radio1" style="margin-left:20px ;" />按期交

				<input type="radio" value="1" name="paytype" id="radio2" style="margin-left:20px ;" />有优惠

				<input type="text" placeholder="申请入住时间" id="start" name="start_time">
				<input type="text" placeholder="申请到期时间" id="end" name="end_time">

			</form>
			<button class="public-g-btn btn-block" id="sure">确认</button>

		</div>

		<script type="text/javascript">
			mui.init();
			var userInfo = JSON.parse(localStorage.getItem("userInfo"));
			var url = localStorage.getItem("url");
			
			var bed_id = document.getElementById("bed_id");
			var user_id = document.getElementById("user_id");
			var realUrl = url + "/user/getUser";

			$("#name").attr("readonly", true);
			mui.ajax(realUrl, {
				data: {
					id: userInfo,
				},

				//服务器返回json格式数据 
				type: 'post', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(data) {
					if(data.code == 0) {
						$("#name").val(data.data.name);
						$("#username").val(data.data.username);
						
						if(data.data.deposit == null || data.data.deposit == "") {

							mui.alert("你还没有缴纳押金请先缴纳押金");
							return;
						} else {
							(function($, doc) {

								$.init();
								$.ready(function() {
									var realurl = url + "/review/getbedInfo"

									mui.ajax(realurl, {
										data: {
											user_sex: data.data.userSex
										},

										//服务器返回json格式数据 
										type: 'post', //HTTP请求类型
										timeout: 10000, //超时时间设置为10秒；
										success: function(data) {

											cityPicker3.setData(data);
										},
										error: function(xhr, type, errorThrown) { //异常处理；
											console.log(type);
										}
									});
									var cityPicker3 = new $.PopPicker({
										layer: 4
									});

									var showCityPickerButton = doc.getElementById('bed');
									var cityResult3 = doc.getElementById('cityResult3');

									showCityPickerButton.addEventListener('tap', function(event) {

										cityPicker3.show(function(items) {
											showCityPickerButton.value = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text + "房间  " + (items[3] || {}).text + "号铺";
											bed_id.value = items[3].value;
											//返回 false 可以阻止选择框的关闭
											//return false;
										});
									}, false);
								});
							})(mui, document);
						}

					}

				},
				error: function(xhr, type, errorThrown) { //异常处理；
					console.log(type);
				}
			});

			var start = document.getElementById("start");
			var end = document.getElementById("end");
			var bed = document.getElementById("bed");
			var sure = document.getElementById("sure");

			$('input[type=radio][name=paytype]').change(function() {

				$("#start").val("");
				$("#end").val("");
				if(this.value == 0) {
					$("#start").blur(function() {

						$("#end").prop("readonly", true);
						$("#end").val($("#start").val());

					});
				} else if(this.value == 1) {

					$("#start").val("")
					$("#end").val("");
					end.addEventListener('tap', function() {

						var dDate = new Date();
						var minDate = new Date();
						//最小时间
						minDate.setFullYear(2018, 0, 1);
						var maxDate = new Date();
						//最大时间
						maxDate.setFullYear(2026, 11, 31);
						plus.nativeUI.pickDate(function(e) {
							var c = e.date;
							var date = new Date(end.value);
							plus.nativeUI.pickTime(function(e) {
								var d = e.date;
								mui.toast("选择的时间：" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
								end.value = c.getFullYear() + "-" + (c.getMonth() + 1) + "-" + c.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

							});

						}, function(e) {
							mui.toast("您没有选择日期");
						}, {
							title: '请选择日期',
							date: dDate,
							minDate: minDate,
							maxDate: maxDate
						});

					});

				}
			});

			/*申请入住时间点击时间*/
			start.addEventListener('tap', function() {

				var dDate = new Date();
				var minDate = new Date();
				//最小时间
				minDate.setFullYear(2018, 0, 1);
				var maxDate = new Date();
				//最大时间
				maxDate.setFullYear(2026, 11, 31);
				plus.nativeUI.pickDate(function(e) {
					var c = e.date;
					mui.toast('您选择的日期是:' + c.getFullYear() + "-" + (c.getMonth() + 1) + "-" + c.getDate());
					/*start.value = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();*/
					var date = new Date(start.value);
					plus.nativeUI.pickTime(function(e) {
						var d = e.date;
						mui.toast("选择的时间：" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
						start.value = c.getFullYear() + "-" + (c.getMonth() + 1) + "-" + c.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

					});

				}, function(e) {
					mui.toast("您没有选择日期");
				}, {
					title: '请选择日期',
					date: dDate,
					minDate: minDate,
					maxDate: maxDate
				});

				function pickTime() {

					plus.nativeUI.pickTime(function(e) {
						var d = e.date;
						mui.toast("选择的时间：" + d.getHours() + ":" + d.getMinutes());
						var time = d.getHours() + ":" + d.getMinutes();

					});

				}

			});
			sure.addEventListener('tap', function() {

				var input = document.getElementsByTagName("input");
				var username = input[1].value;
				var bedid = input[4].value;
				var starttime = input[7].value;
				var endtime = input[8].value;
				var userInfo = JSON.parse(localStorage.getItem("userInfo"));
				user_id.value = userInfo;
				var phone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
				var date1 = new Date(starttime);
				var date2 = new Date(endtime);
				var myDate = new Date();

				if(!phone.test(username.trim())) {
					mui.toast("手机号格式不正确");
					return;
				}
				if(bedid == '') {
					mui.alert("床位信息不能为空");
					return;
				}
				if(starttime == '') {
					mui.alert("入住时间不能为空");
					return;
				}
				if(endtime == '') {
					mui.alert("到期时间不能为空");
					return;
				}
				if(date1.getTime() > date2.getTime()) {
					mui.alert("入住时间不能比到期时间晚");
					return;
				}
				if(myDate.getDay() > date1.getDay()) {
					mui.alert("入住时间不能比当前时间早");
					return;
				}
				var realUrl1 = url + "/mobilereview/liveApply"
				$.ajax({
					//几个参数需要注意一下
					type: "POST", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: realUrl1, //url
					data: $('#form1').serialize(),
					success: function(result) {
						console.log(result); //打印服务端返回的数据(调试用)
						if(result.code == 0) {
							mui.alert(result.msg);
							my.jump("index.html","live_apply");
						} else {
							mui.alert(result.msg);
						};
					},
					error: function() {
						console.log("异常");
					}
				});

			});
			$("#radio1").change();
		</script>
		<script type="text/javascript">
		</script>
	</body>

</html>